<template>
  <div class="container">
    <div class="register_box">
      <div style="font-size: 30px;font-weight: bolder">注册</div>
      <div class="form_container">
        <el-form :model="data.form" ref='formRef' :rules="data.rules" label-position="top">
          <el-form-item prop="username">
            <el-input v-model="data.form.username" prefix-icon="User"
                      style="width: 90%;height: 40px;font-weight: bolder;font-size: 15px;border-radius: 10px"
                      placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="data.form.password" prefix-icon="Key"
                      style="width: 90%;height: 40px;font-weight: bolder;font-size: 15px;border-radius: 10px"
                      placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="data.role"
                       style="width: 90%;height: 40px;font-weight: bolder;font-size: 15px;border-radius: 10px"
                       placeholder="请选择账号身份">
              <el-option value='0' label="用户"></el-option>
              <el-option value='1' label="商家"></el-option>
            </el-select>
          </el-form-item>
          <div class="business" v-if="data.role==='1'">
            <el-form-item prop="shopname">
              <el-input v-model="data.form.shopname" prefix-icon="UserFilled"
                        style="width: 90%;height: 40px;font-weight: bolder;font-size: 15px;border-radius: 10px"
                        placeholder="请输入店名"></el-input>
            </el-form-item>
            <el-form-item prop="address">
              <el-input v-model="data.form.address" prefix-icon="Address"
                        style="width: 90%;height: 40px;font-weight: bolder;font-size: 15px;border-radius: 10px"
                        placeholder="请输入地址"></el-input>
            </el-form-item>
          </div>
        </el-form>
        <div style="font-size: 30px;font-weight: bolder">
          <el-button @click="register" type="success" style="width: 40%">注册</el-button>
          <el-button @click="back_login" type="primary" style="width: 40%">返回</el-button>
        </div>
      </div>
    </div>

  </div>
</template>
<script setup>
import {reactive, ref} from "vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";

const data = reactive({
  form: {},
  rules: {
    username: [{required: true, message: "请输入账号", trigger: "blur"}],
    password: [{required: true, message: "请输入密码", trigger: "blur"}],
    shopname: [{required: true, message: "请输入店铺名", trigger: "blur"}],
    address: [{required: true, message: "请输入店铺地址", trigger: "blur"}],
    role: [{required: true, message: "请选择您的账号身份", trigger: "blur"}],
  },
})
const formRef = ref();
const register = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      if (data.form.role === 1) {
        request.post("/register/business/", data.form).then((res) => {
          if (res.code === 200) {
            ElMessage.success("注册成功！")
            setTimeout(() => {
              location.href = "/login";
            }, 500)
          } else {
            ElMessage.error(res.msg)
          }
        })
      } else {
        request.post("/register/user", data.form).then((res) => {
          if (res.code === 200) {
            ElMessage.success("注册成功！")
            setTimeout(() => {
              location.href = "/login";
            }, 500)
          } else {
            ElMessage.error(res.msg)
          }
        })
      }
    }

  })
}


</script>
<style scoped>
.container {
  height: 100vh;
  background-color: #F06A1D;
  background-image: url("@/assets/img/login_bc.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: contain;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.register_box {

  background-color: rgba(255, 255, 255, 0.78);
  margin: auto;
  width: 20%;
  height: 350px;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  position: absolute;
  right: 65%;
}
</style>